<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;}
			.slide img{width: 100%;height: 100%;}
			.dot{position: absolute;height: 20px;width: 100%;left:0;bottom: 0;background-color: rgba(0,0,0,0.5);padding: 4px 0;text-align: center;}
			.dot span{display: inline-block;height: 12px;width: 12px;background-color: #fff;margin-left: 4px;}
			.dot .active{background-color: #e33;}
			.prev,.next{position:absolute;top:215px;height: 50px;width: 50px;cursor: pointer;}
			.prev{left:10px;background: url('./images/prev.png') no-repeat center center / 100% auto;}
			.next{right:10px;background: url('./images/next.png') no-repeat center center / 100% auto;}
		</style>
	</head>
	<body>
		<div class="slide">
			<img src="./images/1.jpg" id="img">
			<div class="dot" id="dot">
				
			</div>
			<div class="btn prev" id="prev"></div>
			<div class="btn next" id="next"></div>
		</div>
		<script type="text/javascript">
			// 轮播图方法之一 改变图片路径法
			var img = document.getElementById('img');
			console.dir(img);
			var imgsArray = ['a-1.jpg','b-2.jpg','c-3.jpg','d-4.png','b-2.jpg','c-3.jpg','d-4.png']; // 图片数组 7
			var imgsLength = imgsArray.length; // 图片数组的长度
			var i = 0; // 当前图片的索引值
			var timer = null;
			var str = '';
			for(var k = 0;k < imgsLength;k++){ // 动态生成 dot 下标记的方块 
				if(k){
					str += '<span id="'+k+'"></span>';
				}else{
					str += '<span class="active" id="'+k+'"></span>';
				}
			}
			console.log('str字符串：'+str);
			document.getElementById('dot').innerHTML = str;
			
			function restartTimer(){
				timer = setInterval(function(){
					if(i > imgsLength - 1){
						i = 0;
					}
					document.getElementById(i).classList.add('active'); // 第一步：让当前显示的图片对应的圆点变色
					for(var j = 0;j < imgsLength;j++){ // 循环遍历图片数量，把跟当前图片数字不一样的圆点样式移除
						if(j !== i){
							document.getElementById(j).classList.remove('active');
						}
					}
					img.src = './images/'+ imgsArray[i++];
					console.log(i);
					console.log('timer:'+timer);
				},1000);
			}
			restartTimer();


			document.getElementById('prev').onclick = function(){
				clearInterval(timer);
				if(i < 1){
					i = imgsLength;
				}
				img.src = './images/'+imgsArray[--i];
				document.getElementById(i).classList.add('active'); // 第一步：让当前显示的图片对应的圆点变色
				for(var j = 0;j < imgsLength;j++){ // 循环遍历图片数量，把跟当前图片数字不一样的圆点样式移除
					if(j !== i){
						document.getElementById(j).classList.remove('active');
					}
				}
				restartTimer();
			}


			document.getElementById('next').onclick = function(){
				clearInterval(timer);
				if(i > imgsLength - 2){
					i = -1;
				}
				img.src = './images/'+(imgsArray[++i]);
				document.getElementById(i).classList.add('active'); // 第一步：让当前显示的图片对应的圆点变色
				for(var j = 0;j < imgsLength;j++){ // 循环遍历图片数量，把跟当前图片数字不一样的圆点样式移除
					if(j !== i){
						document.getElementById(j).classList.remove('active');
					}
				}
				restartTimer();
			}
		</script>
	</body>
</html>